<template>
  <v-app>
    <v-app-bar hide-on-scroll app flat class="white">
      <v-row no-gutters justify="center">
        <v-col xl="6" lg="9" class="pa-0">
          <Header />
        </v-col>
      </v-row>
    </v-app-bar>
    <v-divider></v-divider>

    <v-main class="grey lighten-3">
      <v-row
        no-gutters
        justify="center"
        class="white item_sticky"
        ref="tags"
        style="top: 0"
        v-show="(tags.length != 0 && this.$route.path != '/mistalk') || (this.$route.path == '/mistalk' && this.$vuetify.breakpoint.smAndDown )"
      >
        <v-col xl="6" lg="9" md="12" sm="12" xs="12" class="pa-0">
          <Tags @getTags="getTags" />
        </v-col>
      </v-row>
      <v-row no-gutters justify="center">
        <v-col xl="6" lg="9" class="pa-0">
          <nuxt />
        </v-col>
      </v-row>
    </v-main>
    <v-footer absolute app class="pa-0">
      <Footer />
    </v-footer>
    

  </v-app>
</template>

<script>
import Header from '~/components/common/Header.vue'
import Tags from '~/components/common/Tags'
import Footer from '~/components/common/Footer'

export default {
  components: {
    Header,
    Tags,
    Footer,
  },
  watch: {
    $window: {
      handler(val) {
        console.log(val)
      },
    },
  },
  data: () => ({
    tags: [],
    btnFlag:false
  }),
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    getTags(tags) {
      this.tags = tags
    },
    
  backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
  },
  
  // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
  scrollToTop () {
    const that = this
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    that.scrollTop = scrollTop
    if (that.scrollTop > 60) {
      that.btnFlag = true
    } else {
      that.btnFlag = false
    }
  },
    // handleScroll() {
    //   //获取滚动时的高度

    //   // 页面滚动距顶部距离
    //   var scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop
    //   var scroll = scrollTop - this.i
    //   this.i = scrollTop
    //   if (scroll < 0) {
    //     this.$refs.tags.style.top = 60

    //     console.log('up')
    //   } else {
    //     this.$refs.tags.style.top = 0

    //     console.log('down')
    //   }
    // },
  },
}
</script>
<style>
.item_sticky {
  position: sticky;
  height: 40px;
  position: -webkit-sticky;
  z-index: 4;
}
</style>
